import React, { useEffect, useState, useRef, useMemo } from 'react';
import { NavigationProp, RouteProp } from '@react-navigation/native';
import { StyleSheet, TouchableOpacity, View, Text, Image, TextInput, Button, Alert, TouchableHighlight } from 'react-native';
import { useSelector } from 'react-redux';
import { CommonStyle } from '../../../common/commonStyle.ts';
import { Loading } from '../../../component/LoadingOverlay.tsx';
import { AppDispatch, RootState } from '../../../redux/store.ts';
import AntDesign from 'react-native-vector-icons/AntDesign';
import FontAwesome5 from 'react-native-vector-icons/AntDesign';
import HomeRequest from '../../../request/homeRequest.ts';
import CustomFlatList from '../../../component/CustomFlatList.tsx';
import { useReactive } from 'ahooks';
import { Badge, Actionsheet, useDisclose, useToast } from 'native-base';
import { ShowConfirmDialog } from '../../../component/ConfirmDialog.tsx';

interface IActivityDetailProps {
  navigation: NavigationProp<any, 'activityDetail'>;
  route: RouteProp<{ activityDetail: any }, 'activityDetail'>;
}

interface IData {
  activityId: number;
  activityInfo?: IActivityListIsList;
  type: number;
  btnList: IActivityListChildBtnList[];
  colorContainer: string[];
}

const ActivityDetail: React.FC<IActivityDetailProps> = ({ navigation, route }) => {
  const { isOpen, onOpen, onClose } = useDisclose();

  const data = useReactive<IData>({
    activityId: route.params!.id,
    activityInfo: undefined,
    type: 0,
    btnList: [],
    colorContainer: ['#07C160', '#1989FA', '#8148AD', '#FF9FB7', '#FF976A'],
  });

  const fetchGetActivityDetail = () => {
    Loading.show('正在加载中');
    HomeRequest.GetActivityDetails({
      id: data.activityId,
    })
      .then((res) => {
        Loading.hide();
        data.activityInfo = res.data;
        console.log(data.activityInfo.downNums);
        if (data.activityInfo.downNums < 0) {
          data.activityInfo.downNums = Math.abs(data.activityInfo.downNums);
          data.type = 2;
        } else if (data.activityInfo.upNums < 0) {
          data.activityInfo.upNums = Math.abs(data.activityInfo.upNums);
          data.type = 1;
        }
        console.log(data.type);
      })
      .catch((err) => {
        Loading.hide();
      });
  };

  const getBtnList = () => {
    Loading.show('正在加载中');
    HomeRequest.ActivityListChildBtn({ activityId: data.activityId })
      .then((res) => {
        Loading.hide();
        data.btnList = res.data;
        data.btnList.forEach((item, index) => (item.color = data.colorContainer[index]));
        onOpen();
      })
      .catch((err) => {
        Loading.hide();
      });
  };

  const clickActions = (states: number) => {
    if (data.type) return;
    // 更新 type 和发起请求
    const newType = states;
    data.type = newType;
    HomeRequest.ActivityClickActions({ id: data.activityId, type: newType + 1 })
      .then((res) => {
        // 更新 downNums 和 upNums
        if (data.type === 2) {
          data.activityInfo!.downNums++;
        } else if (data.type === 1) {
          data.activityInfo!.upNums++;
        }
      })
      .catch((err) => {
        // 错误处理
      });
  };

  useEffect(() => {
    fetchGetActivityDetail();
  }, []);
  return (
    <View style={styles.viewBox}>
      <View style={styles.contentView}>
        <Image style={styles.imageStyle} source={{ uri: 'https://wx4.sinaimg.cn/orj480/008Awczvly1hpk9qyla6pj30k00zktiw.jpg' }} />
      </View>
      <View style={styles.operatorMenu}>
        <View style={styles.operatorMenuLeft}>
          <View style={{ marginRight: 5 }}>
            <AntDesign name="eye" size={22}></AntDesign>
          </View>
          <View>
            <Text style={[styles.textStyle]}>{data.activityInfo?.viewNums}</Text>
          </View>
        </View>
        <TouchableOpacity
          onPress={() => {
            clickActions(1);
          }}
          style={styles.operatorMenuCenter}
        >
          <View style={{ marginRight: 5 }}>
            <AntDesign name="like1" size={20} color={data.type === 1 ? 'red' : ''}></AntDesign>
          </View>
          <View>
            <Text style={[styles.textStyle, { color: data.type === 1 ? 'red' : '' }]}>{data.activityInfo?.upNums}</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            clickActions(2);
          }}
          style={styles.operatorMenuRight}
        >
          <View style={{ marginRight: 5 }}>
            <AntDesign name="dislike1" size={20} color={data.type === 2 ? 'red' : ''}></AntDesign>
          </View>
          <View>
            <Text style={[styles.textStyle, { color: data.type === 2 ? 'red' : '' }]}>{data.activityInfo?.downNums}</Text>
          </View>
        </TouchableOpacity>
      </View>
      <View style={styles.btnView}>
        <TouchableOpacity style={styles.button} onPress={() => getBtnList()}>
          <Text style={{ color: 'white', fontWeight: 'bold' }}>{data.activityInfo?.activityName}</Text>
        </TouchableOpacity>
      </View>
      <Actionsheet isOpen={isOpen} onClose={onClose}>
        <Actionsheet.Content>
          <Text>选择产品按钮</Text>
          {data.btnList.map((item, index) => (
            <Actionsheet.Item key={index}>
              <Text style={{ color: item.color }}>{item.btnName}</Text>
            </Actionsheet.Item>
          ))}
        </Actionsheet.Content>
      </Actionsheet>
    </View>
  );
};

const styles = StyleSheet.create({
  viewBox: {
    width: '100%',
    height: '100%',
    backgroundColor: '#eee',
  },
  contentView: {},
  operatorMenu: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 10,
    height: 50,
    backgroundColor: 'white',
    borderBottomWidth: 1,
    borderTopWidth: 1,
    borderColor: '#ccc',
  },
  operatorMenuLeft: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  operatorMenuCenter: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  imageStyle: {
    width: '100%',
    height: 500,
  },
  operatorMenuRight: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  textStyle: {
    color: '#576574',
  },
  btnView: {
    alignItems: 'center',
    marginTop: 20,
  },
  button: {
    backgroundColor: CommonStyle.mainColor,
    width: '90%',
    height: 40,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ActivityDetail;
